<template>
  <div class="repayment_list_page">
    <div class="search_mod">
      <el-form>
        <div class="form_box">
          <div class="form_item m_b_20">
            <div class="key">融资日期:</div>
            <el-input class="value" ></el-input>
          </div>
          <div class="form_item m_b_20">
            <div class="key">融资企业:</div>
            <el-input class="value" ></el-input>
          </div>
          <div class="form_item m_b_20">
            <div class="key">状态:</div>
            <el-select class="value" >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="form_item">
            <div class="key">融资金额:</div>
            <el-date-picker >
            </el-date-picker>
          </div>
          <div class="form_item">
            <div class="key">还款日期:</div>
            <el-date-picker >
            </el-date-picker>
          </div>
          <div class="form_item">
            <div class="key"></div>
            <div class="value btns">
              <el-button type="primary" class="btn" @click="search">查询</el-button>
              <el-button class="btn reset_btn" @click="reset">重置</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table_mod">
      <div class="title">
        <i class="icon"></i>
        还款列表
      </div>
      <el-table :data="tableData">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          v-bind="item"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="look(scope.row.id)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { repaymentList } from '@/api/repayment'

export default {
  data() {
    return {
      statusList: [ // 状态
        {
          label: '启用',
          value: '',
        },
        {
          label: '禁用',
          value: '',
        },
      ],
      form: {

      },
      columns: [],
      tableData: [],
    }
  },
  created() {
    this.columns = [
      {
        label: '序号',
        type: 'index'
      },
      {
        label: '融资日期',
        prop: '',
      },
      {
        label: '融资企业',
        prop: '',
      },
      {
        label: '融资金额(元)',
        prop: '',
      },
      {
        label: '剩余待还金额(元)',
        prop: '',
      },
      {
        label: '贷款期限(月)',
        prop: '',
      },
      {
        label: '已还期限(月)',
        prop: '',
      },
      {
        label: '待还金额(元)',
        prop: '',
      },
      {
        label: '还款日期',
        prop: '',
      },
      {
        label: '状态',
        prop: 'status', // 审核状态 （"10", "待初审"), ("20", "待复审"), ("30", "成功"), ("40", "失败"）
        formatter: (row, column, cellValue, index) => {
          switch(Number(cellValue)) {
            case 10:
              return '待初审'
            case 20:
              return '待复审'
            case 30:
              return '成功'
            case 40:
              return '失败'
          }
        }
      },
    ]
  },
  mounted() {
    this.getRepaymentList()
  },
  methods: {
    search() {
      this.getRepaymentList()
    },
    reset() {
      // test
      Object.keys(this.form).forEach((key) => {
        this.form[key] = ''
      })
    },
    getRepaymentList() {
      repaymentList({ ...this.form, userType: this.userType }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows
        }
      })
    },
    look(id) {
      this.$router.push({
        path: '/productionCenter/financingDetail',
        query: {
          id,
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.mod {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 20px 16px 24px;
}
.repayment_list_page {
  .search_mod {
    @extend .mod;
    .form_box {
      display: flex;
      flex-wrap: wrap;
      .form_item {
        width: 33.33%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.m_b_20 {
          margin-bottom: 20px;
        }
        .key {
          width: 140px;
          flex-shrink: 0;
          text-align: right;
          margin-right: 10px;
          color: #777;
          font-size: 14px;
        }
        ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
          flex: 1 1 auto;
        }
        .value {
          flex: 1 1 auto;
        }
        .btns {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .btn {
            width: 40%;
          }
        }
      }
    }
  }
  .table_mod {
    @extend .mod;
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .icon {
        width: 3px;
        height: 16px;
        border-radius: 1px;
        background-color: $theme;
        margin-right: 5px;
      }
    }
    .add_box {
      margin-bottom: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
